<script setup>
import { ref, onMounted, computed ,onBeforeUnmount, nextTick,watchEffect,defineExpose} from 'vue'
import { useRoamStore } from '../../store';
// 创建音频实例

const roam=useRoamStore()
// 响应式变量和函数
const isShow = ref(false)
const currentTime = ref()
const list=ref([])
const activeIndex=ref(0)
const childrenRef=ref()
const progressBarWidth = ref('0%');
const getRoamList=()=>{
	uni.request({
		url: 'http://localhost:3008/roamList',
		method: 'GET',
		data: {},
		success: res => {
			list.value=res.data
			innerAudioContext.src = list.value[activeIndex.value].src
			roam.roamList=list.value
			console.log(list.value);
		},
		fail: () => {},
		complete: () => {}
	});
}

const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false
console.log(list.value);

const formatTime = (time) => {
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)
    const formattedTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    return formattedTime
}

// 计算属性
const current = computed(() => {
    return formatTime(Math.floor(innerAudioContext.currentTime))
})

// 组件挂载时设置定时器
onMounted(() => {
	getRoamList()
    const timer = setInterval(() => {
        currentTime.value = Math.floor(innerAudioContext.currentTime)
    }, 1000)

    innerAudioContext.onStop(() => {
        clearInterval(timer)
    })
	 const timer1 = setInterval(updateProgressBarWidth, 1000);
	
	    innerAudioContext.onStop(() => {
	        clearInterval(timer1);
	    });

})


// 播放和暂停函数
const play = () => {
    innerAudioContext.play()
    isShow.value = true
}

const pause = () => {
    innerAudioContext.pause()
    isShow.value = false
}
const last = () => {
	nextTick()
  if (activeIndex.value === 0) {
    return;
  } else {
  activeIndex.value--;
  progressBarWidth.value= '0%';
  isShow.value = true
  innerAudioContext.src = list.value[activeIndex.value].src;
  innerAudioContext.play()
	// console.log(list.value[activeIndex.value].src);
	// console.log(activeIndex.value);
  }
}
const next=()=>{
	nextTick()
	if (activeIndex.value === list.value.length-1) {
	  return;
	} else {
	  activeIndex.value++;
	  progressBarWidth.value= '0%';
	  isShow.value = true
	  innerAudioContext.src = list.value[activeIndex.value].src;
	  innerAudioContext.play()
	 
	  // console.log(list.value[activeIndex.value].src);
	  // console.log(activeIndex.value);
	}
}
// 在进度条定时器中更新进度条长度

const open=()=>{
	childrenRef.value.open('bottom')
}
const updateProgressBarWidth = () => {
    const currentTime = Math.floor(innerAudioContext.currentTime);
    const totalDuration = Math.floor(innerAudioContext.duration);
    
    if (typeof currentTime === 'number' && typeof totalDuration === 'number') {
        const progressWidth = (currentTime / totalDuration) * 100 + '%';
        progressBarWidth.value = progressWidth;
    }
}



</script>

<template>
	<view class="container">
		<view class="header">
			<img src="../../static/xiala.png" alt="">
			<view>
				<ul>
					<li>私人漫游</li>
					<li>默认模式</li>
				</ul>
			</view>
			<img src="../../static/分享.png" alt="">
		</view>
		
			<view class="rim" :class="{revolve:isShow}">
				<view class="loop">
					<view class="music">
						<img :src="list[activeIndex].pic">
					</view>
				</view>
			</view>
				
		<view class="detail">
			<view class="profile">
				<span>{{list[activeIndex].song}}</span>
				<span>{{list[activeIndex].singer}}</span>
			</view>
			<view class="like">
				<img src="../../static/点赞.png">
				<img src="../../static/评论.png">
			</view>
		</view>
		
		<view class="progress">
		  <view class="progress-bar" id="progressBar" :style="{ width: progressBarWidth }"></view>
		</view>
				
		<view class="process">
			<span>{{currentTime}}</span>
			<span>高清臻音</span>
			<span>{{list[activeIndex].time}}</span>
		</view>
		
		<view class="func">
			<img src="../../static/24.png">
			<view class="pause">
				<img src="../../static/上一首.png" @click="last()">
				<img src="../../static/播放2.png" v-if="!isShow" @click="play()">
				<img src="../../static/暂停.png" v-else @click="pause()">
				<img src="../../static/下一首.png" @click="next()">
			</view>
			<img src="../../static/更多12 (2).png" @click="open()">
		</view>
		
		
		<uni-popup ref="childrenRef" background-color="#1b1b23"  type="bottom">
			<popup></popup>
		</uni-popup>
<!-- 		<popup ref="childrenRef"></popup> -->
	</view>
</template>

<style scoped> 
*{
	margin: 0 auto;
	overflow: hidden;
}
.container{
	background-color:#1b1b23;
	height: 100vh;
}
.header{
	color:#fff;
	display: flex;
	justify-content: space-between;
	line-height: 30px;
	margin: 0 10px;
}
.header img{
	width: 30px;
	height: 30px;
	margin: 0px;
}
.header ul{
	list-style: none;
	display: flex;
	padding-left: 0px;
}
.header li{
		margin: auto 10px;
}
.rim{
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		margin-top:60px;
	}
	.loop{
		width: 280px;
		height: 280px;
		border-radius: 50%;
		background-color: black;
		display: flex;
		justify-content: center;
		align-items: center
	}
	.music{
		display: flex;
		justify-content: center;
		align-items: center
	}
	.music img{
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}
	.revolve{
		animation: rotate 7s linear infinite;
	}
	@keyframes rotate {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
	
	.detail{
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 70px;
	}
	.profile{
		display: flex;
		flex-direction: column;
		/* justify-content: flex-start; */
		margin: auto 20px;
	}
	.profile :nth-child(1){
		margin-left: 0px;
		font-size: 18px;
		color: #b6b6b6;
	}
	.profile :nth-child(2){
		font-size: 12px;
		color:  #868686;
	}
	.like{
		width: 100px;
		display: flex;
		justify-content: space-around;
		margin-right: 0px;
	}
	.like img{
		width: 30px;
		height: 30px;
		margin-top: 10px;
		/* margin: 10px 20px 0 20px; */
		
	}
	/* .progress-box {
			display: flex;
			height: 50px;
			margin-bottom: 60px;
	} */
	
	.progress {
	  width: 96%;
	  height: 3px;
	  background-color: #7d7d7d;
	  border-radius: 10px;
	  margin-top: 30px;
	}
	
	.progress-bar {
	  margin-left: 0px;
	  width: 10%;
	  height: 100%;
	  background-color:#b3b3b3;
	  transition: width 0.5s;
	   border-radius: 10px;
	}
	
	
	.process{
		display: flex;
		justify-content: space-between;
		margin: 10px 15px 0px 15px;
		color:  #868686;
	}
	.process span{
		margin: 0px;
		font-size:12px ;
	}
	
	.func{
		display: flex;
		justify-content: space-between;
		margin: 30px 15px 50px 15px;
	}
	.func img{
		width: 30px;
		height: 30px;
		margin: 0px;
		margin-top: 5px;
	}
	.pause{
		display: flex;
		justify-content: space-between;
		width: 40%;
	}
	.pause img{
		width: 40px;
		height: 40px;
		margin-top: 0px;
	}
</style>
